<template>
    <div class="container" ref="rec">
        <p class="oneP">小程序的传播方式</p>
        <p class="twoP">有效地和消费者建立亲密互动，营销效果立竿见影</p>
        <div class="rec" v-for="(item,index) in arr1" :key="index" :class="{bg:index==liIndex}" @mouseover="showBg(index)" @click="showContent(index)">
            <div>
                <img :src="item[0]">
            </div>
            <div>
                <p>{{item[1]}}</p>
                <p>{{item[2]}}</p>
            </div>
            <div>
                <img :src="item[3]">
            </div>
        </div>
        <div class="rec-back">
            <img src="../../assets/img/1微信小程序/切图/1-3.png" alt="">
            <img src="../../assets/img/1微信小程序/切图/2-2.png" alt="">
            <img src="../../assets/img/1微信小程序/切图/3-3.png" alt="">
        </div>
        <div class="phone">
            <div v-if="liIndex1==0">
                <img src="../../assets/img/1微信小程序/切图/26.png" alt="">
            </div>
            <div v-if="liIndex1==1">
                <img src="../../assets/img/1微信小程序/切图/27.png" alt="">
            </div>
            <div v-if="liIndex1==2">
                <img src="../../assets/img/1微信小程序/切图/28.png" alt="">
            </div>
            <div v-if="liIndex1==3">
                <img src="../../assets/img/1微信小程序/切图/29.png" alt="">
            </div>
        </div>
    </div>
</template>
<script>
require('../../assets/css/p.css')
const img1 = require('../../assets/img/1微信小程序/切图/15.png')
const img2 = require('../../assets/img/1微信小程序/切图/19.png')
const img3 = require('../../assets/img/1微信小程序/切图/22.png')
const img4 = require('../../assets/img/1微信小程序/切图/wawa.png')
const img5 = require('../../assets/img/1微信小程序/切图/18.png')
const img6 = require('../../assets/img/1微信小程序/切图/17.png')
const img7 = require('../../assets/img/1微信小程序/切图/23.png')
const img8 = require('../../assets/img/1微信小程序/切图/24.png')
export default {
  data() {
    return {
      arr1: [
        [img1, '创意比拼玩法', '引导社交活动', img5],
        [img2, '加入分享按钮', '提醒用户转发', img5],
        [img7, '设计同伴环境', '鼓励社群传播', img4],
        [img7, '聚焦核心功能', '促进口碑传播', img3]
      ],
      liIndex: 0,
      liIndex1: 2
    }
  },
  created() {},
  mounted() {},
  methods: {
    showBg(index) {
      this.liIndex = index
    },
    showContent(index) {
      this.liIndex1 = index
    }
  }
}
</script>
<style scoped>
@keyframes circleOne {
  0% {
    opacity: 0.8;
    transform: scale(0.5);
    border-radius: 50%;
  }
  100% {
    opacity: 0.3;
    transform: scale(3.5);
    border-radius: 50%;
  }
}
.container {
  width: 1200px;
  margin: 0 auto;
  margin-top: 80px;
  text-align: center;
  position: relative;
  height: 735px;
  overflow: hidden;
  height:670px;
}
.rec {
  width: 240px;
  height: 60px;
  cursor: pointer;
  position: absolute;
  box-shadow: 2px 2px 20px #ebebeb;
  z-index: 4;
  background-color: #fff;
}
.rec-back {
  width: 300px;
  height: 300px;
  position: absolute;
  transition: all 2s;
  left: 25%;
  bottom: -15%;
  z-index:-1;
}
.rec-back img {
  width: 100%;
  height:100%;
  position: absolute;
  opacity:1;
}
.rec-back img:nth-child(1) {
  z-index: 3;
  animation: circleOne 4.5s ease-out forwards infinite;
}
.rec-back img:nth-child(2) {
  z-index: 2;
   animation: circleOne 4.5s ease-out 1.5s forwards infinite;
}
.rec-back img:nth-child(3) {
  z-index: 1;
   animation: circleOne 4.5s ease-out 3s forwards infinite;
}
.bg {
  background: url('../../assets/img/1微信小程序/切图/16.png');
}
.white {
  background: #fff;
}
.rec:nth-child(3) {
  position: absolute;
  top: 215px;
  left: 135px;
}
.rec:nth-child(4) {
  position: absolute;
  top: 416px;
  left: 32px;
}
.rec:nth-child(5) {
  position: absolute;
  top: 332px;
  right: 119px;
}
.rec:nth-child(6) {
  position: absolute;
  top: 533px;
  right: 30px;
}
.rec > div {
  float: left;
}
.rec > div:nth-child(1) {
  position: absolute;
  top: -13px;
  left: -46px;
}
.rec > div:nth-child(2) > p {
  font-size: 16px;
  color: #222;
  margin-left: 73px;
  margin-top: 5px;
}
.rec.bg div:nth-child(2) > p{
  color: #fff;
}
.rec > div:nth-child(3) > img {
  margin-left: 30px;
  margin-top: 22px;
}
.rec:nth-child(5) > div:nth-child(1) > img,
.rec:nth-child(6) > div:nth-child(1) > img {
  position: static;
  margin-left: 75px;
  margin-top: 35px;
}
.rec:nth-child(5) > div:nth-child(3) > img,
.rec:nth-child(6) > div:nth-child(3) > img {
  position: absolute;
  top: -35px;
  right: -44px;
}
.phone {
  width: 268px;
  height: 480px;
  background: url('../../assets/img/1微信小程序/切图/25.png');
  position: absolute;
  top: 144px;
  left: 50%;
  margin-left: -134px;
}
.phone > div {
  width: 220px;
  height: 370px;
  position: absolute;
  top: 70px;
  left: 24px;
}
.phone > div:nth-child(1) {
  background: url('../../assets/img/1微信小程序/切图/29.png');
}
.phone > div:nth-child(2) {
  background: url('../../assets/img/1微信小程序/切图/27.png');
}
.phone > div:nth-child(3) {
  background: url('../../assets/img/1微信小程序/切图/28.png');
}
.phone > div:nth-child(4) {
  background: url('../../assets/img/1微信小程序/切图/26.png');
}
</style>


